<template>
  <el-menu
    :default-active="$route.path"
    class="sidebar-menu"
    :collapse="false"
    background-color="var(--sidebar-bg)"
    text-color="var(--sidebar-text)"
    active-text-color="var(--sidebar-active)"
    router
  >
    <el-menu-item index="/dashboard">
      <el-icon><DataAnalysis /></el-icon>
      <span>仪表盘</span>
    </el-menu-item>
    <el-menu-item index="/user">
      <el-icon><User /></el-icon>
      <span>用户管理</span>
    </el-menu-item>
    <el-menu-item index="/permission">
      <el-icon><Lock /></el-icon>
      <span>权限管理</span>
    </el-menu-item>
    <el-menu-item index="/goods">
      <el-icon><Goods /></el-icon>
      <span>商品管理</span>
    </el-menu-item>
    <el-menu-item index="/order">
      <el-icon><ShoppingCart /></el-icon>
      <span>订单管理</span>
    </el-menu-item>
    <el-menu-item index="/message">
      <el-icon><Message /></el-icon>
      <span>消息中心</span>
    </el-menu-item>
    <el-menu-item index="/docs">
      <el-icon><i-ep-document /></el-icon>
      <span>文档</span>
    </el-menu-item>
    <el-menu-item index="/guide">
      <el-icon><i-ep-guide /></el-icon>
      <span>引导页</span>
    </el-menu-item>
    <el-sub-menu index="/permission">
      <template #title>
        <el-icon><i-ep-lock /></el-icon>
        <span>权限测试页</span>
      </template>
      <el-menu-item index="/permission/user">用户管理</el-menu-item>
      <el-menu-item index="/permission/role">角色管理</el-menu-item>
      <el-menu-item index="/permission/menu">菜单管理</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="/icons">
      <el-icon><i-ep-picture-outline /></el-icon>
      <span>图标</span>
    </el-menu-item>
    <el-sub-menu index="/components">
      <template #title>
        <el-icon><i-ep-cpu /></el-icon>
        <span>组件</span>
      </template>
      <el-menu-item index="/components/editor">富文本编辑器</el-menu-item>
      <el-menu-item index="/components/markdown">Markdown</el-menu-item>
      <el-menu-item index="/components/draggable">拖拽列表</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="/charts">
      <template #title>
        <el-icon><i-ep-data-analysis /></el-icon>
        <span>图表</span>
      </template>
      <el-menu-item index="/charts/line">折线图</el-menu-item>
      <el-menu-item index="/charts/bar">柱状图</el-menu-item>
      <el-menu-item index="/charts/pie">饼图</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="/nested">
      <template #title>
        <el-icon><i-ep-menu /></el-icon>
        <span>路由嵌套</span>
      </template>
      <el-menu-item index="/nested/menu1">菜单1</el-menu-item>
      <el-menu-item index="/nested/menu2">菜单2</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="/table">
      <template #title>
        <el-icon><i-ep-table /></el-icon>
        <span>Table</span>
      </template>
      <el-menu-item index="/table/basic">基础表格</el-menu-item>
      <el-menu-item index="/table/complex">复杂表格</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="/example">
      <template #title>
        <el-icon><i-ep-suitcase /></el-icon>
        <span>综合实例</span>
      </template>
      <el-menu-item index="/example/tree">树形控件</el-menu-item>
      <el-menu-item index="/example/tabs">Tab页</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { 
  DataAnalysis, 
  User,
  Lock,
  Goods,
  ShoppingCart,
  Message
} from '@element-plus/icons-vue'
</script>

<style scoped>
.sidebar-menu {
  width: 200px;
  min-height: 100vh;
  border: none;
  background: linear-gradient(135deg, #e3f0ff 0%, #a3c9f9 100%);
  background: var(--sidebar-bg, linear-gradient(135deg, #e3f0ff 0%, #a3c9f9 100%));
  transition: background 0.3s;
}
.sidebar-menu .el-menu-item, .sidebar-menu .el-sub-menu__title {
  border-radius: 8px;
  margin: 4px 8px;
  height: 44px;
  display: flex;
  align-items: center;
  font-size: 15px;
  color: var(--sidebar-text, #fff);
  transition: background 0.2s, color 0.2s;
}
.sidebar-menu .el-menu-item.is-active, .sidebar-menu .el-sub-menu.is-opened > .el-sub-menu__title {
  background: var(--sidebar-active, #fff) !important;
  color: var(--sidebar-active-text, #2176d2) !important;
  box-shadow: 0 2px 8px rgba(64,158,255,0.10);
}
.sidebar-menu .el-menu-item:hover, .sidebar-menu .el-sub-menu__title:hover {
  background: #409EFF !important;
  color: #fff !important;
}
.sidebar-menu .el-icon {
  margin-right: 28px;
  font-size: 18px;
}
</style>

